<template>
    <div>
        <!-- 输出框 -->
        <div class="output">
            <scroller>
                <text>
<!--                    {{state}}  {{keyboard_state}} -->
                    {{content}}

                </text>
            </scroller>

        </div>

        <!-- 输入框 -->
        <div>
            <input test-id="input-obj" ref="range" class="input" type="text" placeholder="请输入你的问题" @blur="onBlur" @return="answer"></input>
        </div>

        <!-- 选择模块 -->
        <div class="group">
            <div class="panel"><text class="text" @click="setRange">c语言语法</text></div>
            <div class="panel"><text class="text" @click="getRange">数据结构</text></div>
        </div>
    </div>
</template>

<script>
  const stream = weex.requireModule('stream');
  console.log('welcome')
  console.log(stream);
  module.exports = {
    data () {
      return{
        state:'',
        keyboard_state: '',
        content:'',
        lists:[1,2,3]
      }

    },
    methods : {
      answer2:function (e) {
        // this.content='content here: '+ JSON.stringify(e)
        this.content='content here: '+ e.value
      },

      answer:function(e){
        stream.fetch({
          method: 'GET',
          // url: 'http://193.112.145.13/public/'+e.value,
          url: 'http://193.112.145.13/public/printf返回什么',
          type:'json'
        }, function(ret) {
          if(!ret.ok){
            this.content = 'failed to connect'
          }else{
            // this.content = ret.info;
            this.content = 'success';
          }
        });
        // this.content = e.value;
      },

      setRange() {
        this.$refs.range.setSelectionRange(1, 4);
      },
      getRange() {
        this.$refs.range.getSelectionRange(params => {
          this.state = `当前文本选区为 ${params.selectionStart} ~ ${params.selectionEnd}`;
          this.keyboard_state = "";
        });
      },
    }
  }
</script>

<style scoped>
    .mr-base{
        margin: 10px;
    }
    .title {
        height: 100px;
        margin-top: 30px;
        margin-bottom: 20px;
        flex-direction: column;
        justify-content: center;
    }
    .output {
        border-width: 2px;
        border-style: solid;
        border-color: rgb(162, 217, 192);
        width: 650px;
        height: 200px;
        margin-left: 50px;
        margin-top: 20px;
        margin-bottom: 30px;
    }
    .desc{
        color:#aa0000;
        font-size: 30px;
    }
    .input{
        width: 650px;
        height:100px;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(162, 217, 192);
        placeholder-color: #41B883;
        margin-left: 50px;
        padding-left: 20px;
        font-size: 28px;
    }
    .panel {
        height: 100px;
        flex-direction: column;
        border-width: 2px;
        border-style: solid;
        border-color: rgb(162, 217, 192);
        background-color: rgba(162, 217, 192, 0.2);
        margin-left: 20px;
        display:inline-block;
        padding: 10px;
        padding-top: 20px;
    }
    .group {
        flex-direction: row;
        width:auto;
        margin-top: 30px;
        margin-left: 45px;
        margin-right: auto;
    }
</style>
